/* 从现有组件中提取的公共样式 */

/* Flex布局工具类 - 从Navigation等组件提取的实际使用模式 */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.flex-vertical {
  display: flex;
  flex-direction: column;
}

.flex-vertical-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-align-start {
  display: flex;
  align-items: flex-start;
}

/* 卡片样式 - 从Navigation组件提取 */
.card-base {
  background: #F5F5F5;
  border-radius: 10px;
  padding: 0.5rem;
  transition: all 0.3s ease;
}

.card-transparent {
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

/* 应用卡片样式 - Navigation组件中大量使用 */
.app-card-base {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 12px;
  cursor: pointer;
}

.app-card-hover:hover {
  transform: translateY(-2px);
}

/* 图标基础样式 - Navigation中的重复模式 */
.icon-base {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  border: 3px solid rgba(0, 0, 0, 0.08);
  color: #4a5568;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.icon-large {
  width: 64px;
  height: 64px;
  font-size: 1.8rem;
  border-radius: 16px;
}

.icon-medium {
  width: 48px;
  height: 48px;
  font-size: 1.4rem;
  border-radius: 12px;
}

/* 菜单按钮样式 - Navigation中重复使用 */
.menu-trigger-base {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.7rem;
  color: #999;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-trigger-base:hover {
  background: #f0f0f0;
  color: #666;
}

/* 下拉菜单样式 - Navigation中使用 */
.dropdown-menu-base {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0.5rem;
  min-width: 150px;
  z-index: 1000;
  margin-top: 0.25rem;
}

.menu-item-base {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  font-size: 0.9rem;
  color: #333;
  transition: background 0.2s;
}

.menu-item-base:hover {
  background: #f0f0f0;
}

.menu-item-danger:hover {
  background: #fee;
  color: #e53e3e;
}

/* 表单样式 - 从DocumentSpace等组件提取 */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-color, #2c3e50);
  font-weight: 500;
}

.form-input,
.form-control {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color, #dcdfe6);
  border-radius: 4px;
  font-size: 14px;
  background: var(--background-color, #ffffff);
  color: var(--text-color, #2c3e50);
  transition: border-color 0.2s ease;
}

.form-input:focus,
.form-control:focus {
  outline: none;
  border-color: var(--primary-color, #42b883);
  box-shadow: 0 0 0 2px rgba(66, 184, 131, 0.2);
}

.form-textarea {
  min-height: 80px;
  resize: vertical;
  font-family: inherit;
}

.form-select {
  cursor: pointer;
}

/* 深色主题适配 */
.dark .form-group label {
  color: var(--text-color, #ffffff);
}

.dark .form-input,
.dark .form-control {
  background: var(--background-color, #1e1e1e);
  border-color: var(--border-color, #333333);
  color: var(--text-color, #ffffff);
}

.dark .form-input:focus,
.dark .form-control:focus {
  border-color: var(--primary-color, #42b883);
}

/* 深色模式卡片样式 */
.dark .card-base {
  background: rgba(var(--color-bg-dark), var(--opacity-main));
}

/* 间距工具类 - 基于实际使用的值 */
.gap-xs { gap: 0.25rem; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 0.75rem; }
.gap-lg { gap: 1rem; }
.gap-xl { gap: 1.5rem; }

.p-xs { padding: 0.25rem; }
.p-sm { padding: 0.5rem; }
.p-md { padding: 0.75rem; }
.p-lg { padding: 1rem; }
.p-xl { padding: 1.5rem; }

.m-xs { margin: 0.25rem; }
.m-sm { margin: 0.5rem; }
.m-md { margin: 0.75rem; }
.m-lg { margin: 1rem; }
.m-xl { margin: 1.5rem; }

.mb-xs { margin-bottom: 0.25rem; }
.mb-sm { margin-bottom: 0.5rem; }
.mb-md { margin-bottom: 0.75rem; }
.mb-lg { margin-bottom: 1rem; }
.mb-xl { margin-bottom: 1.5rem; }

.mr-xs { margin-right: 0.25rem; }
.mr-sm { margin-right: 0.5rem; }
.mr-md { margin-right: 0.75rem; }
.mr-lg { margin-right: 1rem; }
.mr-xl { margin-right: 1.5rem; }

/* 常用圆角 */
.rounded-sm { border-radius: 4px; }
.rounded-md { border-radius: 6px; }
.rounded-lg { border-radius: 8px; }

/* 拖拽状态 */
.sortable-ghost {
  opacity: 0.4;
  transform: scale(0.95);
}

/* Navigation Header Controls Styles */
.nav-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 32px;
  padding: 0;
  margin: 0;
  background: transparent;
}

.grid-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.control-label {
  font-size: 0.85rem;
  color: #cccccc;
  font-weight: 400;
  white-space: nowrap;
}

.columns-selector {
  padding: 0.375rem 0.5rem;
  border: 1px solid #555555;
  border-radius: 4px;
  background: #404040;
  font-size: 0.85rem;
  color: #cccccc;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 70px;
  height: 32px;
  box-sizing: border-box;
}

.columns-selector:hover {
  background: #4a4a4a;
  border-color: #007acc;
}

.columns-selector:focus {
  outline: none;
  border-color: #007acc;
  background: #4a4a4a;
}

.columns-selector option {
  background: #404040;
  color: #cccccc;
}

.create-btn {
  background: #007acc;
  border: 1px solid #007acc;
  color: #ffffff;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 400;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  height: 32px;
  box-sizing: border-box;
}

.create-btn:hover {
  background: #0088dd;
  border-color: #0088dd;
}

.create-btn:active {
  background: #006bb3;
  border-color: #006bb3;
}